<template>
    <div class="header">
        <div
            class="header-back"
            v-if="hasBack"
            @click="goBack"
        ></div>
        <div class="header-title">{{headerTitle}}</div>
        <div
            class="header-home"
            v-if="hasHome"
            @click="goHome"
        ></div>
    </div>
</template>

<script>
export default {
    name: 'CommonHeader',
    props: ['hasBack', 'hasHome', 'headerTitle'],
    methods: {
        goBack() {
            if (this.$route.path == '/goPay') {
                this.$router.push({
                    path: '/orderList',
                    query: {
                        orderType: 0
                    }
                })
                return
            } else if (this.$route.path == '/orderList') {
                this.$router.push('/userCenter')
                return
            } else if (this.$route.path == '/userInfo') {
                this.$router.push('/userCenter')
                return
            }
            if (window.history.length <= 1) {
                this.$router.push('/')
                return
            } else {
                this.$router.go(-1)
                return
            }
            this.$router.push('/')
        },
        goHome() {
            this.$router.push('/')
        }
    }
}
</script>

<style lang="stylus" scoped>
.header
    position relative
    display flex
    align-items center
    padding 0 1.11rem
    background #fff
    height 1.11rem
    box-sizing border-box
    .header-back
        position absolute
        top 0
        left 0
        width 1.11rem
        height 1.11rem
        background url('../assets/images/header/back.png')
        background-size 0.2rem 0.36rem
        background-repeat no-repeat
        background-position center
    .header-home
        position absolute
        top 0
        right 0
        width 1.11rem
        height 1.11rem
        background url('../assets/images/header/home.png')
        background-size 0.5rem 0.5rem
        background-repeat no-repeat
        background-position center
    .header-title
        flex 1
        text-align center
        font-size 0.42rem
        color #333
</style>

